<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layouts/header :: head('监控仪表盘 - 监控工具平台')">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控仪表盘 - 监控工具平台</title>
    <link rel="stylesheet" href="/monitoring/css/element-ui.css">
    <link rel="stylesheet" href="/monitoring/css/custom.css">
</head>
<body>
    <!-- 使用公共头部 -->
    <div th:replace="layouts/header :: header"></div>

    <div id="app" class="container">
        <h2>监控仪表盘</h2>
        
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>核心服务健康状态</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="checkAllTargetServices">立即检查所有</el-button>
            </div>
            <div>
                <el-table :data="targetServices" style="width: 100%">
                    <el-table-column prop="name" label="服务名称" width="180"></el-table-column>
                    <el-table-column prop="url" label="服务地址" width="250"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.status ? 'success' : (scope.row.status === null ? 'info' : 'danger')">
                                {{ scope.row.status === null ? '未检测' : (scope.row.status ? '健康' : '异常') }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="响应时间" width="120">
                        <template slot-scope="scope">
                            <span v-if="scope.row.responseTime">{{ scope.row.responseTime }}ms</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="最后检查时间" width="180">
                        <template slot-scope="scope">
                            {{ scope.row.lastCheckTime || '未检查' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="checkTargetService(scope.$index)">检查</el-button>
                            <el-button size="mini" type="info" @click="showServiceDetails(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        
        <!-- JVM监控专用卡片 -->
        <el-card class="box-card jvm-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>JVM监控</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="monitorMiddleware('JVM')">立即监控</el-button>
            </div>
            <div v-if="loading" class="loading-container">
                <i class="el-icon-loading"></i>
                <p>加载JVM监控数据中...</p>
            </div>
            <div v-else-if="!jvmResult">
                <el-empty description="暂无JVM监控数据">
                    <el-button type="primary" @click="monitorMiddleware('JVM')">开始监控</el-button>
                </el-empty>
            </div>
            <div v-else>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-tag :type="getStatusType(jvmResult.status)">{{ jvmResult.status }}</el-tag>
                        <p>{{ jvmResult.details }}</p>
                        <p>最后监控时间: {{ formatTime(jvmResult.monitorTime) }}</p>
                    </el-col>
                </el-row>
                
                <div v-if="jvmResult.metrics">
                    <el-tabs type="border-card">
                        <!-- 内存标签页 -->
                        <el-tab-pane label="内存">
                            <el-row :gutter="20">
                                <!-- 堆内存 -->
                                <el-col :span="12">
                                    <h4>堆内存</h4>
                                    <el-progress 
                                        v-if="jvmResult.metrics && jvmResult.metrics.heapMemory && jvmResult.metrics.heapMemory.usagePercent"
                                        :percentage="getMemoryPercentage(jvmResult.metrics.heapMemory.usagePercent)" 
                                        :color="getMemoryColor(jvmResult.metrics.heapMemory.usagePercent)"
                                        :format="() => jvmResult.metrics.heapMemory.usagePercent">
                                    </el-progress>
                                    <div v-else>暂无堆内存使用率数据</div>
                                    <el-table 
                                        v-if="jvmResult.metrics && jvmResult.metrics.heapMemory"
                                        :data="formatObjectToArray(jvmResult.metrics.heapMemory)" 
                                        stripe size="small">
                                        <el-table-column prop="key" label="指标" width="100"></el-table-column>
                                        <el-table-column prop="value" label="值"></el-table-column>
                                    </el-table>
                                    <div v-else>暂无堆内存数据</div>
                                </el-col>
                                
                                <!-- 非堆内存 -->
                                <el-col :span="12">
                                    <h4>非堆内存 (元空间)</h4>
                                    <el-progress 
                                        v-if="jvmResult.metrics && jvmResult.metrics.nonHeapMemory && jvmResult.metrics.nonHeapMemory.usagePercent && jvmResult.metrics.nonHeapMemory.usagePercent !== 'N/A'"
                                        :percentage="getMemoryPercentage(jvmResult.metrics.nonHeapMemory.usagePercent)" 
                                        :color="getMemoryColor(jvmResult.metrics.nonHeapMemory.usagePercent)"
                                        :format="() => jvmResult.metrics.nonHeapMemory.usagePercent">
                                    </el-progress>
                                    <div v-else>无法计算使用率 (无上限或数据不完整)</div>
                                    <el-table 
                                        v-if="jvmResult.metrics && jvmResult.metrics.nonHeapMemory"
                                        :data="formatObjectToArray(jvmResult.metrics.nonHeapMemory)" 
                                        stripe size="small">
                                        <el-table-column prop="key" label="指标" width="100"></el-table-column>
                                        <el-table-column prop="value" label="值"></el-table-column>
                                    </el-table>
                                    <div v-else>暂无非堆内存数据</div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        
                        <!-- 线程标签页 -->
                        <el-tab-pane label="线程">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="thread-card">
                                        <h4>线程信息</h4>
                                        <div class="thread-stats" v-if="jvmResult.metrics && jvmResult.metrics.threadInfo">
                                            <div class="stat-item">
                                                <div class="stat-value">{{ jvmResult.metrics.threadInfo.current }}</div>
                                                <div class="stat-label">当前线程数</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">{{ jvmResult.metrics.threadInfo.peak }}</div>
                                                <div class="stat-label">峰值线程数</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">{{ jvmResult.metrics.threadInfo.daemon }}</div>
                                                <div class="stat-label">守护线程数</div>
                                            </div>
                                            <div class="stat-item">
                                                <div class="stat-value">{{ jvmResult.metrics.threadInfo.totalStarted }}</div>
                                                <div class="stat-label">启动线程总数</div>
                                            </div>
                                        </div>
                                        <div v-else>暂无线程信息数据</div>
                                    </div>
                                </el-col>
                                
                                <el-col :span="12">
                                    <div class="class-loading-card">
                                        <h4>类加载信息</h4>
                                        <el-table 
                                            v-if="jvmResult.metrics && jvmResult.metrics.classLoading"
                                            :data="formatObjectToArray(jvmResult.metrics.classLoading)" 
                                            stripe size="small">
                                            <el-table-column prop="key" label="指标" width="120"></el-table-column>
                                            <el-table-column prop="value" label="值"></el-table-column>
                                        </el-table>
                                        <div v-else>暂无类加载信息</div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        
                        <!-- GC标签页 -->
                        <el-tab-pane label="垃圾回收">
                            <h4>垃圾回收器信息</h4>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-table 
                                        v-if="jvmResult.metrics && jvmResult.metrics.gc"
                                        :data="formatGCInfo(jvmResult.metrics.gc)" 
                                        stripe size="small">
                                        <el-table-column prop="name" label="收集器名称" width="180"></el-table-column>
                                        <el-table-column prop="count" label="收集次数" width="100"></el-table-column>
                                        <el-table-column prop="time" label="收集总时间" width="120"></el-table-column>
                                        <el-table-column prop="avgTimePerGC" label="平均每次收集时间" width="150"></el-table-column>
                                        <el-table-column prop="memoryPools" label="管理的内存区域"></el-table-column>
                                    </el-table>
                                    <div v-else>暂无垃圾回收器信息</div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        
                        <!-- 系统信息标签页 -->
                        <el-tab-pane label="系统信息">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <h4>操作系统信息</h4>
                                    <el-table 
                                        v-if="jvmResult.metrics && jvmResult.metrics.os"
                                        :data="formatObjectToArray(jvmResult.metrics.os)" 
                                        stripe size="small">
                                        <el-table-column prop="key" label="指标" width="180"></el-table-column>
                                        <el-table-column prop="value" label="值"></el-table-column>
                                    </el-table>
                                    <div v-else>暂无操作系统信息</div>
                                    
                                    <div v-if="jvmResult.metrics && jvmResult.metrics.os && jvmResult.metrics.os.physicalMemoryUsage" class="memory-usage-card">
                                        <h4>系统内存使用情况</h4>
                                        <el-progress 
                                            :percentage="getMemoryPercentage(jvmResult.metrics.os.physicalMemoryUsage)" 
                                            :color="getMemoryColor(jvmResult.metrics.os.physicalMemoryUsage)"
                                            :format="() => jvmResult.metrics.os.physicalMemoryUsage">
                                        </el-progress>
                                        <div class="memory-info">
                                            <span>总内存: {{ jvmResult.metrics.os.totalPhysicalMemory || '未知' }}</span>
                                            <span>可用内存: {{ jvmResult.metrics.os.freePhysicalMemory || '未知' }}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </el-card>
        
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24">
                <h3>其他中间件监控</h3>
            </el-col>
            <el-col :span="24" v-for="(item, index) in otherMiddlewareResults" :key="index" style="margin-bottom: 20px;">
                <el-card class="box-card middleware-card">
                    <div slot="header" class="clearfix">
                        <span>{{ item.name }}</span>
                        <el-tag size="mini" style="margin-left: 10px;" 
                              v-if="middlewareStatus[item.name] === false"
                              type="info">未配置</el-tag>
                        <el-button 
                            style="float: right; padding: 3px 0" 
                            type="text" 
                            @click="monitorMiddleware(item.name)"
                            :disabled="middlewareStatus[item.name] === false">
                            立即监控
                        </el-button>
                    </div>
                    <div>
                        <el-row :gutter="20">
                            <el-col :span="4">
                                <div class="middleware-status-panel">
                                    <el-tag :type="getStatusType(item.status)" style="margin-bottom: 10px;">{{ item.status }}</el-tag>
                                    <p>{{ item.details }}</p>
                                    <p>最后监控时间: {{ formatTime(item.monitorTime) }}</p>
                                </div>
                            </el-col>
                            <el-col :span="20">
                                <div v-if="item.metrics && Object.keys(item.metrics).length > 0">
                                    <!-- Redis 特殊显示 -->
                                    <div v-if="item.name === 'Redis'">
                                        <div v-if="item.metrics && Object.keys(item.metrics).length > 0">
                                            <el-tabs type="card">
                                                <!-- 基本信息标签页 -->
                                                <el-tab-pane label="基本信息">
                                                    <el-row :gutter="20" v-if="item.metrics.basic">
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">Redis版本</div>
                                                                <div class="stat-value-sm">{{ item.metrics.basic.version }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">运行模式</div>
                                                                <div class="stat-value-sm">{{ item.metrics.basic.mode }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">运行时长</div>
                                                                <div class="stat-value-sm">{{ item.metrics.basic.uptime }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">操作系统</div>
                                                                <div class="stat-value-sm">{{ item.metrics.basic && item.metrics.basic.os || 'N/A' }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <div v-else>
                                                        <el-alert title="暂无基本信息数据" type="info" :closable="false"></el-alert>
                                                    </div>
                                                </el-tab-pane>
                                                
                                                <!-- 内存标签页 -->
                                                <el-tab-pane label="内存">
                                                    <el-row :gutter="20" v-if="item.metrics.memory">
                                                        <el-col :span="12">
                                                            <div class="memory-usage-card">
                                                                <h4>内存使用情况</h4>
                                                                <el-progress 
                                                                    v-if="item.metrics.memory.usagePercent && item.metrics.memory.usagePercent !== 'N/A'"
                                                                    :percentage="getMemoryPercentage(item.metrics.memory.usagePercent)" 
                                                                    :color="getMemoryColor(item.metrics.memory.usagePercent)"
                                                                    :format="() => item.metrics.memory.usagePercent">
                                                                </el-progress>
                                                                <div v-else>无法计算使用率 (未设置最大内存或数据不完整)</div>
                                                                
                                                                <div class="memory-info">
                                                                    <span>已用内存: {{ item.metrics.memory.usedMemory || 'N/A' }}</span>
                                                                    <span>最大内存: {{ item.metrics.memory.maxMemory || 'N/A' }}</span>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="stat-box">
                                                                <div class="stat-label">内存碎片率</div>
                                                                <div class="stat-value-sm">{{ item.metrics.memory.memFragmentationRatio || 'N/A' }}</div>
                                                            </div>
                                                            <div class="stat-box" style="margin-top: 10px;">
                                                                <div class="stat-label">物理内存</div>
                                                                <div class="stat-value-sm">{{ item.metrics.memory.usedMemoryRss || 'N/A' }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <div v-else>
                                                        <el-alert title="暂无内存使用数据" type="info" :closable="false"></el-alert>
                                                    </div>
                                                </el-tab-pane>
                                                
                                                <!-- 性能标签页 -->
                                                <el-tab-pane label="性能">
                                                    <el-row :gutter="20" v-if="item.metrics.performance">
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">命令总数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.performance.totalCommands }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">每秒操作数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.performance.opsPerSecond }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">键查询命中</div>
                                                                <div class="stat-value-sm">{{ item.metrics.performance.keyspaceHits }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">键查询未命中</div>
                                                                <div class="stat-value-sm">{{ item.metrics.performance.keyspaceMisses }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    
                                                    <el-row :gutter="20" style="margin-top: 10px;" v-if="item.metrics.performance">
                                                        <el-col :span="24">
                                                            <div class="stat-box">
                                                                <div class="stat-label">键查询命中率</div>
                                                                <div class="stat-value-sm">{{ item.metrics.performance.hitRatio }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <div v-else>
                                                        <el-alert title="暂无性能指标数据" type="info" :closable="false"></el-alert>
                                                    </div>
                                                </el-tab-pane>
                                                
                                                <!-- 连接标签页 -->
                                                <el-tab-pane label="连接">
                                                    <el-row :gutter="20" v-if="item.metrics.connection">
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">当前连接数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.connection.connectedClients }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">阻塞连接数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.connection.blockedClients }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">最大连接数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.connection.maxClients }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    <div v-else>
                                                        <el-alert title="暂无连接信息数据" type="info" :closable="false"></el-alert>
                                                    </div>
                                                </el-tab-pane>
                                                
                                                <!-- 持久化标签页 -->
                                                <el-tab-pane label="持久化" v-if="item.metrics.persistence">
                                                    <el-row :gutter="20">
                                                        <el-col :span="12">
                                                            <div class="stat-box">
                                                                <div class="stat-label">最后保存时间</div>
                                                                <div class="stat-value-sm">{{ item.metrics.persistence.rdbLastSaveTime }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="stat-box">
                                                                <div class="stat-label">上次保存后更改数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.persistence.rdbChangesSinceLastSave }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    
                                                    <el-row :gutter="20" style="margin-top: 10px;">
                                                        <el-col :span="24">
                                                            <div class="stat-box">
                                                                <div class="stat-label">AOF开启状态</div>
                                                                <div class="stat-value-sm">{{ item.metrics.persistence.aofEnabled }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </el-tab-pane>
                                                
                                                <!-- 数据库标签页 -->
                                                <el-tab-pane label="数据库" v-if="item.metrics.keyspace">
                                                    <div v-for="(value, key) in formatRedisKeyspace(item.metrics.keyspace)" :key="key" class="keyspace-item">
                                                        <div>{{ key }}：{{ value }}</div>
                                                    </div>
                                                </el-tab-pane>
                                            </el-tabs>
                                        </div>
                                        <div v-else>
                                            <el-card class="error-card">
                                                <div slot="header" class="error-header">
                                                    <i class="el-icon-warning"></i>
                                                    <span>Redis监控异常</span>
                                                </div>
                                                <div class="error-content">
                                                    <el-alert 
                                                        :title="'连接失败: ' + item.details" 
                                                        type="error" 
                                                        :closable="false"
                                                        show-icon>
                                                    </el-alert>
                                                    <div class="error-info">
                                                        <p><strong>状态：</strong><el-tag type="danger">{{ item.status }}</el-tag></p>
                                                        <p><strong>最后检查时间：</strong>{{ formatTime(item.monitorTime) }}</p>
                                                        <p><strong>解决建议：</strong></p>
                                                        <ul>
                                                            <li>检查Redis服务是否正常启动</li>
                                                            <li>验证Redis连接配置是否正确</li>
                                                            <li>确认网络连接是否畅通</li>
                                                            <li>检查Redis认证信息是否有效</li>
                                                        </ul>
                                                    </div>
                                                    <div class="error-actions">
                                                        <el-button type="primary" size="small" @click="refreshMonitoring('Redis')">
                                                            <i class="el-icon-refresh"></i> 重新检测
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-card>
                                        </div>
                                    </div>
                                    
                                    <!-- MySQL 特殊显示 -->
                                    <div v-else-if="item.name === 'MySQL'">
                                        <el-tabs type="card">
                                            <!-- 基本信息标签页 -->
                                            <el-tab-pane label="基本信息">
                                                <el-row :gutter="20" v-if="item.metrics.basic">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">MySQL版本</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.version }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">当前数据库</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.database }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">默认字符集</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.characterSet }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">排序规则</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.collation }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <div v-else>
                                                    <el-alert title="暂无基本信息数据" type="info" :closable="false"></el-alert>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- 连接信息标签页 -->
                                            <el-tab-pane label="连接信息">
                                                <el-row :gutter="20" v-if="item.metrics.connection">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">最大连接数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.connection.maxConnections }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">已连接线程数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.connection.threadsConnected }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">运行中线程数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.connection.threadsRunning }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">已缓存线程数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.connection.threadsCached }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <div v-else>
                                                    <el-alert title="暂无连接信息数据" type="info" :closable="false"></el-alert>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- 性能指标标签页 -->
                                            <el-tab-pane label="性能指标">
                                                <el-row :gutter="20" v-if="item.metrics.performance">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">每秒查询数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.performance.queriesPerSecond }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">慢查询数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.performance.slowQueries }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">每秒SELECT</div>
                                                            <div class="stat-value-sm">{{ item.metrics.performance.selectsPerSecond }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">每秒INSERT</div>
                                                            <div class="stat-value-sm">{{ item.metrics.performance.insertsPerSecond }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <div v-else>
                                                    <el-alert title="暂无性能指标数据" type="info" :closable="false"></el-alert>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- InnoDB引擎标签页 -->
                                            <el-tab-pane label="InnoDB引擎">
                                                <el-row :gutter="20" v-if="item.metrics.innodb">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">缓冲池使用率</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.bufferPoolUtilization }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">缓冲池命中率</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.bufferPoolHitRate }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">读取行数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.rowsRead }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">插入行数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.rowsInserted }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">更新行数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.rowsUpdated }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">删除行数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.innodb.rowsDeleted }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <div v-else>
                                                    <el-alert title="暂无InnoDB引擎数据" type="info" :closable="false"></el-alert>
                                                </div>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                    
                                    <!-- System 特殊显示 -->
                                    <div v-else-if="item.name === 'System'">
                                        <el-tabs type="card">
                                            <!-- 系统基本信息标签页 -->
                                            <el-tab-pane label="基本信息">
                                                <el-row :gutter="20" v-if="item.metrics.basic">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">操作系统</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.osName }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">系统版本</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.osVersion }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">系统架构</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.osArch }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">Java版本</div>
                                                            <div class="stat-value-sm">{{ item.metrics.basic.javaVersion }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </el-tab-pane>
                                            
                                            <!-- 磁盘信息标签页 -->
                                            <el-tab-pane label="磁盘信息">
                                                <div v-if="item.metrics.disk">
                                                    <el-row :gutter="20" style="margin-bottom: 20px;">
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">总容量</div>
                                                                <div class="stat-value-sm">{{ item.metrics.disk.totalSpace }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">已使用</div>
                                                                <div class="stat-value-sm">{{ item.metrics.disk.usedSpace }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">可用空间</div>
                                                                <div class="stat-value-sm">{{ item.metrics.disk.usableSpace }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <div class="stat-box">
                                                                <div class="stat-label">使用率</div>
                                                                <div class="stat-value-sm">{{ item.metrics.disk.totalUsagePercent }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    
                                                    <h4>磁盘分区详情</h4>
                                                    <el-table :data="item.metrics.disk.disks" stripe size="small" style="width: 100%">
                                                        <el-table-column prop="path" label="分区路径" width="120"></el-table-column>
                                                        <el-table-column prop="totalSpace" label="总容量" width="120"></el-table-column>
                                                        <el-table-column prop="usedSpace" label="已使用" width="120"></el-table-column>
                                                        <el-table-column prop="usableSpace" label="可用空间" width="120"></el-table-column>
                                                        <el-table-column prop="usagePercent" label="使用率" width="100"></el-table-column>
                                                    </el-table>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- 内存信息标签页 -->
                                            <el-tab-pane label="内存信息">
                                                <div v-if="item.metrics.memory">
                                                    <!-- 系统内存 -->
                                                    <div v-if="item.metrics.memory.system">
                                                        <h4>系统内存</h4>
                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">物理内存总量</div>
                                                                    <div class="stat-value-sm">{{ item.metrics.memory.system.totalPhysical }}</div>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">已使用内存</div>
                                                                    <div class="stat-value-sm">{{ item.metrics.memory.system.usedPhysical }}</div>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">可用内存</div>
                                                                    <div class="stat-value-sm">{{ item.metrics.memory.system.freePhysical }}</div>
                                                                </div>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- CPU和进程信息标签页 -->
                                            <el-tab-pane label="CPU和进程">
                                                <el-row :gutter="20">
                                                    <el-col :span="12" v-if="item.metrics.cpu">
                                                        <h4>CPU信息</h4>
                                                        <div class="stat-box">
                                                            <div class="stat-label">CPU核心数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.cpu.availableProcessors }}</div>
                                                        </div>
                                                        <div class="stat-box">
                                                            <div class="stat-label">系统负载</div>
                                                            <div class="stat-value-sm">{{ item.metrics.cpu.systemLoadAverage }}</div>
                                                        </div>
                                                    </el-col>
                                                    
                                                    <el-col :span="12" v-if="item.metrics.process">
                                                        <h4>进程信息</h4>
                                                        <div class="stat-box">
                                                            <div class="stat-label">运行进程数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.process.processCount }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </el-tab-pane>
                                            
                                            <!-- 端口信息标签页 -->
                                            <el-tab-pane label="端口信息">
                                                <div v-if="item.metrics.ports">
                                                    <el-row :gutter="20" style="margin-bottom: 20px;">
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">TCP连接数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.ports.tcpConnections }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">UDP连接数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.ports.udpConnections }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">监听端口数</div>
                                                                <div class="stat-value-sm">{{ item.metrics.ports.listeningPorts }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                    
                                                    <h4>监听端口详情（前20个）</h4>
                                                    <el-table :data="item.metrics.ports.portDetails" stripe size="small" style="width: 100%">
                                                        <el-table-column prop="protocol" label="协议" width="80"></el-table-column>
                                                        <el-table-column prop="address" label="地址" width="200"></el-table-column>
                                                        <el-table-column prop="state" label="状态" width="100"></el-table-column>
                                                    </el-table>
                                                </div>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                    
                                    <!-- Elasticsearch 特殊显示 -->
                                    <div v-else-if="item.name === 'Elasticsearch'">
                                        <el-tabs type="card">
                                            <el-tab-pane label="集群信息">
                                                <el-row :gutter="20" v-if="item.metrics.clusterName">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">集群名称</div>
                                                            <div class="stat-value-sm">{{ item.metrics.clusterName }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">健康状态</div>
                                                            <div class="stat-value-sm">
                                                                <el-tag :type="getElasticsearchStatusType(item.metrics.status)">
                                                                    {{ translateElasticsearchStatus(item.metrics.status) }}
                                                                </el-tag>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">节点数</div>
                                                            <div class="stat-value-sm">{{ item.metrics.numberOfNodes }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">数据节点</div>
                                                            <div class="stat-value-sm">{{ item.metrics.numberOfDataNodes }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                
                                                <el-row :gutter="20" style="margin-top: 10px;">
                                                    <el-col :span="24">
                                                        <div class="stat-box">
                                                            <div class="stat-label">活跃分片</div>
                                                            <div class="stat-value-sm">{{ item.metrics.activeShards }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </div>
                                    
                                    <!-- MinIO 特殊显示 -->
                                    <div v-else-if="item.name === 'MinIO'">
                                        <el-tabs type="card">
                                            <!-- 基本信息标签页 -->
                                            <el-tab-pane label="基本信息">
                                                <el-row :gutter="20">
                                                    <el-col :span="8">
                                                        <div class="stat-box">
                                                            <div class="stat-label">MinIO服务端点</div>
                                                            <div class="stat-value-sm">{{ item.metrics.endpoint }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="stat-box">
                                                            <div class="stat-label">服务状态</div>
                                                            <div class="stat-value-sm">
                                                                <el-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</el-tag>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="stat-box">
                                                            <div class="stat-label">访问密钥</div>
                                                            <div class="stat-value-sm">{{ item.metrics.accessKey || 'N/A' }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                
                                                <el-row :gutter="20" style="margin-top: 15px;">
                                                    <el-col :span="12">
                                                        <div class="stat-box">
                                                            <div class="stat-label">连接测试</div>
                                                            <div class="stat-value-sm">
                                                                <el-tag :type="item.status === 'NORMAL' ? 'success' : 'danger'">
                                                                    {{ item.status === 'NORMAL' ? '通过' : '失败' }}
                                                                </el-tag>
                                                            </div>
                                                        </div>
                                                    </el-col>
                                                    <!-- <el-col :span="12">
                                                        <div class="stat-box">
                                                            <div class="stat-label">测试桶状态</div>
                                                            <div class="stat-value-sm">
                                                                <el-tag v-if="item.metrics.testBucketExists !== undefined" 
                                                                        :type="item.metrics.testBucketExists ? 'success' : 'warning'">
                                                                    {{ item.metrics.testBucketExists ? '测试桶已存在' : '测试桶不存在' }}
                                                                </el-tag>
                                                                <span v-else>未检测</span>
                                                            </div>
                                                        </div>
                                                    </el-col> -->
                                                </el-row>
                                            </el-tab-pane>
                                            
                                            <!-- 存储桶管理标签页 -->
                                            <el-tab-pane label="存储桶管理">
                                                <div v-if="item.metrics.buckets && item.metrics.buckets.length > 0">
                                                    <div class="bucket-overview">
                                                        <el-row :gutter="20" style="margin-bottom: 20px;">
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">存储桶总数</div>
                                                                    <div class="stat-value">{{ item.metrics.buckets.length }}</div>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">总存储容量</div>
                                                                    <div class="stat-value-sm">{{ item.metrics.totalSize || '未知' }}</div>
                                                                </div>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <div class="stat-box">
                                                                    <div class="stat-label">对象总数</div>
                                                                    <div class="stat-value-sm">{{ item.metrics.totalObjects || '未知' }}</div>
                                                                </div>
                                                            </el-col>
                                                        </el-row>
                                                    </div>
                                                    
                                                    <h4>存储桶详细信息</h4>
                                                    <el-table :data="formatMinioBuckets(item.metrics.buckets)" 
                                                              stripe size="small" style="width: 100%">
                                                        <el-table-column prop="name" label="存储桶名称" width="200">
                                                            <template slot-scope="scope">
                                                                <el-tag size="mini" type="primary">{{ scope.row.name }}</el-tag>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column prop="creationDate" label="创建时间" width="180">
                                                        </el-table-column>
                                                        <el-table-column prop="size" label="存储大小" width="120">
                                                            <template slot-scope="scope">
                                                                <span>{{ scope.row.size || '未知' }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column prop="objectCount" label="对象数量" width="100">
                                                            <template slot-scope="scope">
                                                                <span>{{ scope.row.objectCount || '未知' }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column prop="status" label="状态" width="100">
                                                            <template slot-scope="scope">
                                                                <el-tag size="mini" :type="scope.row.accessible ? 'success' : 'danger'">
                                                                    {{ scope.row.accessible ? '可访问' : '不可访问' }}
                                                                </el-tag>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column label="权限设置" width="120">
                                                            <template slot-scope="scope">
                                                                <el-tag size="mini" :type="getBucketPolicyType(scope.row.policy)">
                                                                    {{ getBucketPolicyText(scope.row.policy) }}
                                                                </el-tag>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column label="操作">
                                                            <template slot-scope="scope">
                                                                <el-button size="mini" type="text" @click="viewBucketDetails(scope.row)">
                                                                    详情
                                                                </el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                                <div v-else class="no-buckets">
                                                    <el-empty description="没有发现存储桶">
                                                        <el-button type="primary" size="small">刷新检测</el-button>
                                                    </el-empty>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- 性能监控标签页 -->
                                            <el-tab-pane label="性能监控">
                                                <el-row :gutter="20">
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">响应时间</div>
                                                            <div class="stat-value-sm">{{ item.metrics.responseTime || '未知' }}ms</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">请求成功率</div>
                                                            <div class="stat-value-sm">{{ item.metrics.successRate || '未知' }}%</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">上传速度</div>
                                                            <div class="stat-value-sm">{{ item.metrics.uploadSpeed || '未知' }}</div>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="stat-box">
                                                            <div class="stat-label">下载速度</div>
                                                            <div class="stat-value-sm">{{ item.metrics.downloadSpeed || '未知' }}</div>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                
                                                <div style="margin-top: 20px;">
                                                    <h4>API调用统计</h4>
                                                    <el-row :gutter="20">
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">GET请求</div>
                                                                <div class="stat-value-sm">{{ item.metrics.getRequests || '0' }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">PUT请求</div>
                                                                <div class="stat-value-sm">{{ item.metrics.putRequests || '0' }}</div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="stat-box">
                                                                <div class="stat-label">DELETE请求</div>
                                                                <div class="stat-value-sm">{{ item.metrics.deleteRequests || '0' }}</div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-tab-pane>
                                            
                                            <!-- 健康检查标签页 -->
                                            <!-- <el-tab-pane label="健康检查">
                                                <div class="health-checks">
                                                    <el-row :gutter="20">
                                                        <el-col :span="12">
                                                            <div class="health-item">
                                                                <div class="health-label">
                                                                    <i class="el-icon-circle-check" style="color: #67c23a;"></i>
                                                                    连接测试
                                                                </div>
                                                                <div class="health-value">
                                                                    <el-tag :type="item.status === 'NORMAL' ? 'success' : 'danger'">
                                                                        {{ item.status === 'NORMAL' ? '通过' : '失败' }}
                                                                    </el-tag>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="health-item">
                                                                <div class="health-label">
                                                                    <i class="el-icon-folder-opened"></i>
                                                                    测试存储桶访问
                                                                </div>
                                                                <div class="health-value">
                                                                    <el-tag :type="item.metrics.testBucketExists ? 'success' : 'warning'">
                                                                        {{ item.metrics.testBucketExists ? '正常' : '异常' }}
                                                                    </el-tag>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="health-item">
                                                                <div class="health-label">
                                                                    <i class="el-icon-key"></i>
                                                                    认证状态
                                                                </div>
                                                                <div class="health-value">
                                                                    <el-tag :type="item.status === 'NORMAL' ? 'success' : 'danger'">
                                                                        {{ item.status === 'NORMAL' ? '认证成功' : '认证失败' }}
                                                                    </el-tag>
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="12">
                                                            <div class="health-item">
                                                                <div class="health-label">
                                                                    <i class="el-icon-time"></i>
                                                                    最后检查
                                                                </div>
                                                                <div class="health-value">
                                                                    {{ formatTime(item.monitorTime) }}
                                                                </div>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </el-tab-pane> -->
                                        </el-tabs>
                                    </div>
                                    
                                    <!-- 通用展示 -->
                                    <el-table v-else :data="formatMetrics(item.metrics)" stripe>
                                        <el-table-column prop="key" label="指标" width="180"></el-table-column>
                                        <el-table-column prop="value" label="值"></el-table-column>
                                    </el-table>
                                </div>
                                <div v-else-if="middlewareStatus[item.name] === false" class="disabled-middleware">
                                    <i class="el-icon-warning-outline"></i>
                                    <p>{{ item.name }} 中间件未配置或已禁用</p>
                                    <p class="hint-text">请在配置文件中启用该中间件并确保相关依赖已正确配置</p>
                                </div>
                                <div v-else class="no-data">
                                    <i class="el-icon-data-analysis"></i>
                                    <p>暂无监控数据</p>
                                    <el-button type="primary" size="small" @click="monitorMiddleware(item.name)">
                                        开始监控
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
        <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="24">
                <h3>网络连通性监控</h3>
                <el-button @click="checkNetworkConnectivity" type="primary" size="small">立即检查</el-button>
            </el-col>
        </el-row>
        
        <!-- 网络监控概览 -->
        <el-row :gutter="20" style="margin-top: 10px;" v-if="networkResults.length > 0">
            <el-col :span="24">
                <el-card class="network-overview-card">
                    <div slot="header" class="clearfix">
                        <span>网络监控概览</span>
                        <div style="float: right;">
                            <el-tag size="mini" type="success">{{ getNetworkStatusCount('NORMAL') }} 正常</el-tag>
                            <el-tag size="mini" type="warning" style="margin-left: 5px;">{{ getNetworkStatusCount('WARNING') }} 警告</el-tag>
                            <el-tag size="mini" type="danger" style="margin-left: 5px;">{{ getNetworkStatusCount('ERROR') }} 异常</el-tag>
                        </div>
                    </div>
                    <div class="network-overview-stats">
                        <div class="network-stat-item">
                            <div class="network-stat-icon">
                                <i class="el-icon-connection"></i>
                            </div>
                            <div class="network-stat-content">
                                <div class="network-stat-value">{{ networkResults.length }}</div>
                                <div class="network-stat-label">监控节点</div>
                            </div>
                        </div>
                        <div class="network-stat-item">
                            <div class="network-stat-icon success">
                                <i class="el-icon-circle-check"></i>
                            </div>
                            <div class="network-stat-content">
                                <div class="network-stat-value">{{ getNetworkReachableCount() }}</div>
                                <div class="network-stat-label">可达节点</div>
                            </div>
                        </div>
                        <div class="network-stat-item">
                            <div class="network-stat-icon warning">
                                <i class="el-icon-warning"></i>
                            </div>
                            <div class="network-stat-content">
                                <div class="network-stat-value">{{ getNetworkUnreachableCount() }}</div>
                                <div class="network-stat-label">不可达节点</div>
                            </div>
                        </div>
                        <div class="network-stat-item">
                            <div class="network-stat-icon info">
                                <i class="el-icon-link"></i>
                            </div>
                            <div class="network-stat-content">
                                <div class="network-stat-value">{{ getDirectConnectionCount() }}</div>
                                <div class="network-stat-label">直连节点</div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        
        <!-- 网络监控详情 -->
        <el-row :gutter="20" style="margin-top: 15px;">
            <el-col :span="24">
                <div class="network-cards-container">
                    <div v-for="(item, index) in networkResults" :key="index" class="network-detail-card">
                        <div class="network-card-header">
                            <div class="network-card-title">
                                <span class="network-node-name">{{ item.name.replace('Network_', '') }}</span>
                                <div class="network-tags">
                                    <el-tag size="mini" 
                                        :type="item.metrics && item.metrics.connectionType === 'direct' ? 'success' : 'warning'">
                                        {{ item.metrics && item.metrics.connectionType === 'direct' ? '直连' : '间连' }}
                                    </el-tag>
                                    <el-tag size="mini" style="margin-left: 5px;" 
                                        v-if="item.metrics && item.metrics.label">
                                        {{ item.metrics.label }}
                                    </el-tag>
                                </div>
                            </div>
                            <div class="network-status-badge">
                                <el-tag :type="getStatusType(item.status)" size="medium">
                                    {{ getStatusText(item.status) }}
                                </el-tag>
                            </div>
                        </div>
                        
                        <div class="network-card-content">
                            <div class="network-info-section">
                                <div class="network-info-item">
                                    <span class="network-info-label">目标地址:</span>
                                    <span class="network-info-value">{{ item.metrics.host }}</span>
                                </div>
                                <div class="network-info-item" v-if="item.metrics.port">
                                    <span class="network-info-label">端口:</span>
                                    <span class="network-info-value">{{ item.metrics.port }}</span>
                                </div>
                                <div class="network-info-item" v-if="item.metrics.type">
                                    <span class="network-info-label">服务类型:</span>
                                    <span class="network-info-value">{{ item.metrics.type }}</span>
                                </div>
                                <div class="network-info-item">
                                    <span class="network-info-label">检查时间:</span>
                                    <span class="network-info-value">{{ formatTime(item.monitorTime) }}</span>
                                </div>
                            </div>
                            
                            <div class="network-test-results" v-if="item.metrics">
                                <div class="network-test-item">
                                    <div class="network-test-label">
                                        <i class="el-icon-location"></i>
                                        主机可达性
                                    </div>
                                    <div class="network-test-result">
                                        <i :class="item.metrics.isReachable ? 'el-icon-success network-success' : 'el-icon-error network-error'"></i>
                                        <span>{{ item.metrics.isReachable ? '可达' : '不可达' }}</span>
                                    </div>
                                </div>
                                
                                <div class="network-test-item" v-if="item.metrics.port">
                                    <div class="network-test-label">
                                        <i class="el-icon-connection"></i>
                                        端口连接
                                    </div>
                                    <div class="network-test-result">
                                        <i :class="item.metrics.isPortOpen ? 'el-icon-success network-success' : 'el-icon-error network-error'"></i>
                                        <span>{{ item.metrics.isPortOpen ? '开放' : '关闭' }}</span>
                                    </div>
                                </div>
                                
                                <div class="network-test-item" v-if="item.metrics.responseTime">
                                    <div class="network-test-label">
                                        <i class="el-icon-time"></i>
                                        响应时间
                                    </div>
                                    <div class="network-test-result">
                                        <span class="response-time" :class="getResponseTimeClass(item.metrics.responseTime)">
                                            {{ item.metrics.responseTime }}ms
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="network-details-text" v-if="item.details">
                                <p>{{ item.details }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        
        <el-row style="margin-top: 20px;">
            <el-col :span="24">
                <el-button type="primary" @click="exportReport">导出监控报告</el-button>
            </el-col>
        </el-row>
        <!-- 服务详情弹窗 -->
    <el-dialog title="服务详细信息" :visible.sync="serviceDetailVisible" width="50%" class="service-detail-dialog">
        <div v-if="currentServiceDetail">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="服务名称">{{ currentServiceDetail.name }}</el-descriptions-item>
                <el-descriptions-item label="服务地址">{{ currentServiceDetail.url }}</el-descriptions-item>
                <el-descriptions-item label="请求方式">{{ currentServiceDetail.method || 'GET' }}</el-descriptions-item>
                <el-descriptions-item label="期望状态码">{{ currentServiceDetail.expectedRespCode || 200 }}</el-descriptions-item>
                <el-descriptions-item label="当前状态">
                    <el-tag :type="currentServiceDetail.status ? 'success' : (currentServiceDetail.status === null ? 'info' : 'danger')">
                        {{ currentServiceDetail.status === null ? '未检测' : (currentServiceDetail.status ? '健康' : '异常') }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="响应时间" v-if="currentServiceDetail.responseTime">
                    {{ currentServiceDetail.responseTime }}ms
                </el-descriptions-item>
                <el-descriptions-item label="最后检查时间">
                    {{ currentServiceDetail.lastCheckTime || '未检查' }}
                </el-descriptions-item>
            </el-descriptions>
            
            <div style="margin-top: 20px; text-align: right;">
                <el-button @click="serviceDetailVisible = false">关闭</el-button>
                <el-button type="primary" @click="checkServiceDetailTarget">
                    立即检查
                </el-button>
            </div>
        </div>
        <div v-else class="dialog-loading">
            <i class="el-icon-loading"></i>
            <p>加载服务详情中...</p>
        </div>
    </el-dialog>
    </div>

    <script src="/monitoring/js/vue.min.js"></script>
    <script src="/monitoring/js/element-ui.js"></script>
    <script src="/monitoring/js/axios.min.js"></script>
    <script src="/monitoring/js/request.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    activeIndex: '1',
                    targetServices: [],
                    monitoringResults: [],
                    loading: false,
                    serviceDetailVisible: false,
                    currentServiceDetail: null,
                    middlewareStatus: {
                        JVM: true,
                        Redis: false,
                        Elasticsearch: false,
                        MySQL: false,
                        MinIO: false,
                        System: true
                    },
                    middlewareRequestTracking: {
                        JVM: { attempted: false, errorCount: 0 },
                        Redis: { attempted: false, errorCount: 0 },
                        Elasticsearch: { attempted: false, errorCount: 0 },
                        MySQL: { attempted: false, errorCount: 0 },
                        MinIO: { attempted: false, errorCount: 0 },
                        System: { attempted: false, errorCount: 0 }
                    },
                    maxRequestAttempts: 3
                };
            },
            computed: {
                jvmResult() {
                    return this.monitoringResults.find(item => item.name === 'JVM');
                },
                otherMiddlewareResults() {
                    // 返回已配置的中间件结果
                    const middlewares = ['Redis', 'Elasticsearch', 'MySQL', 'MinIO', 'System'];
                    const results = this.monitoringResults.filter(item => 
                        !item.name.startsWith('Network_') && 
                        item.name !== 'JVM' &&
                        middlewares.includes(item.name)
                    );
                    
                    // 为未配置的中间件创建禁用的占位结果
                    middlewares.forEach(name => {
                        if (!results.find(item => item.name === name) && this.middlewareStatus[name] === false) {
                            results.push({
                                name: name,
                                status: 'UNKNOWN',
                                monitorTime: new Date(),
                                details: `${name} 未配置或禁用`,
                                metrics: {}
                            });
                        }
                    });
                    return results;
                },
                networkResults() {
                    return this.monitoringResults.filter(item => item.name.startsWith('Network_'));
                }
            },
            created() {
                this.fetchMiddlewareStatus();
                this.fetchMonitoringResults();
                this.fetchTargetServices();
            },
            methods: {
                fetchMiddlewareStatus() {
                    request.get('/api/monitoring/middleware/status')
                        .then(response => {
                            this.middlewareStatus = response.data;
                            
                            // 只请求已启用的且未尝试过的中间件
                            Object.keys(this.middlewareStatus).forEach(name => {
                                if (this.middlewareStatus[name] && 
                                    !this.middlewareRequestTracking[name].attempted &&
                                    !this.monitoringResults.find(item => item.name === name)) {
                                    this.monitorMiddleware(name);
                                }
                            });
                        })
                        .catch(error => {
                            console.error('获取中间件配置状态失败:', error);
                        });
                },
                fetchTargetServices() {
                    this.loading = true;
                    request.get('/config/api/target-services')
                        .then(response => {
                            this.targetServices = response.data.map(service => ({
                                ...service,
                                status: null,
                                lastCheckTime: null,
                                responseTime: null
                            }));
                            this.checkAllTargetServices();
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('获取目标服务配置失败:', error);
                            this.$message.error('获取目标服务配置失败');
                            this.loading = false;
                        });
                },
                fetchMonitoringResults() {
                    this.loading = true;
                    request.get('/api/monitoring/results')
                        .then(response => {
                            this.monitoringResults = response.data;
                            this.loading = false;
                            
                            // 记录已获取的中间件数据，避免重复请求
                            this.monitoringResults.forEach(result => {
                                if (this.middlewareRequestTracking[result.name]) {
                                    this.middlewareRequestTracking[result.name].attempted = true;
                                }
                            });
                            
                            // 只请求已启用、未尝试过且未达到最大尝试次数的中间件
                            const middlewares = ['JVM', 'Redis', 'Elasticsearch', 'MySQL', 'MinIO', 'System'];
                            middlewares.forEach(name => {
                                const tracking = this.middlewareRequestTracking[name];
                                if (this.middlewareStatus[name] && 
                                    !tracking.attempted && 
                                    tracking.errorCount < this.maxRequestAttempts &&
                                    !this.monitoringResults.find(result => result.name === name)) {
                                    this.monitorMiddleware(name);
                                }
                            });
                        })
                        .catch(error => {
                            console.error('获取监控结果失败:', error);
                            this.$message.error('获取监控结果失败');
                            this.loading = false;
                        });
                },
                checkAllTargetServices() {
                    this.loading = true;
                    const startTime = new Date().getTime();
                    
                    request.get('/api/monitoring/check-all-target-services')
                        .then(response => {
                            const endTime = new Date().getTime();
                            const totalTime = endTime - startTime;
                            
                            if (response.data) {
                                this.targetServices = this.targetServices.map((service, index) => {
                                    // 计算平均响应时间，假设每个服务耗时相近
                                    const avgResponseTime = Math.round(totalTime / this.targetServices.length);
                                    
                                    return {
                                        ...service,
                                        status: response.data[index],
                                        lastCheckTime: this.formatTime(new Date()),
                                        responseTime: avgResponseTime
                                    };
                                });
                            }
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('检查所有目标服务失败:', error);
                            this.$message.error('检查所有目标服务失败');
                            this.loading = false;
                        });
                },
                checkTargetService(index) {
                    this.loading = true;
                    const startTime = new Date().getTime();
                    
                    request.get(`/api/monitoring/check-target-service/${index}`)
                        .then(response => {
                            const endTime = new Date().getTime();
                            const responseTime = endTime - startTime;
                            
                            this.targetServices[index].status = response.data;
                            this.targetServices[index].lastCheckTime = this.formatTime(new Date());
                            this.targetServices[index].responseTime = responseTime;
                            
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('检查目标服务失败:', error);
                            this.$message.error('检查目标服务失败');
                            this.loading = false;
                        });
                },
                monitorMiddleware(name) {
                    // 检查中间件是否已配置
                    if (this.middlewareStatus[name] === false) {
                        this.$message.warning(`${name} 未配置或已禁用，无法监控`);
                        return;
                    }
                    
                    // 如果已尝试达到最大次数，不再请求
                    const tracking = this.middlewareRequestTracking[name];
                    if (tracking && tracking.errorCount >= this.maxRequestAttempts) {
                        this.$message.warning(`${name} 监控失败次数过多，已停止请求`);
                        return;
                    }
                    
                    // 标记为已尝试
                    if (tracking) {
                        tracking.attempted = true;
                    }
                    
                    this.loading = true;
                    request.post(`/api/monitoring/middleware/${name}`)
                        .then(response => {
                            // 成功后重置错误计数
                            if (tracking) {
                                tracking.errorCount = 0;
                            }
                            this.fetchMonitoringResults();
                            this.$message.success(`${name} 监控完成`);
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error(`监控 ${name} 失败:`, error);
                            
                            // 增加错误计数
                            if (tracking) {
                                tracking.errorCount += 1;
                                
                                // 提示不同的错误消息，根据尝试次数
                                if (tracking.errorCount >= this.maxRequestAttempts) {
                                    this.$message.error(`${name} 监控失败次数过多，已停止请求`);
                                } else {
                                    this.$message.error(`${name} 监控失败: ${error.message || '请检查中间件配置和连接'}`);
                                }
                            }
                            
                            this.loading = false;
                        });
                },
                refreshMonitoring(name) {
                    // 重新检测指定中间件，重置错误计数
                    const tracking = this.middlewareRequestTracking[name];
                    if (tracking) {
                        tracking.errorCount = 0; // 重置错误计数
                    }
                    
                    this.$message.info(`正在重新检测 ${name}...`);
                    this.monitorMiddleware(name);
                },
                checkNetworkConnectivity() {
                    this.loading = true;
                    request.post('/api/monitoring/network')
                        .then(response => {
                            this.fetchMonitoringResults();
                            this.$message.success('网络连通性检查完成');
                            this.loading = false;
                        })
                        .catch(error => {
                            console.error('网络连通性检查失败:', error);
                            this.$message.error('网络连通性检查失败');
                            this.loading = false;
                        });
                },
                exportReport() {
                    this.loading = true;
                    
                    request.post('/api/monitoring/export-report')
                        .then(response => {
                            const reportPath = response.data;
                            this.loading = false;
                            
                            // 从路径中提取文件名
                            const fileName = reportPath.substring(reportPath.lastIndexOf('/') + 1);
                            
                            // 创建一个临时的a标签用于下载
                            let downloadLink = document.createElement('a');
                            downloadLink.href = `/monitoring/reports/download?filename=${fileName}`;
                            downloadLink.target = '_blank';
                            downloadLink.download = fileName;
                            
                            // 添加到DOM，点击并移除
                            document.body.appendChild(downloadLink);
                            downloadLink.click();
                            document.body.removeChild(downloadLink);
                            
                            // 同时在新窗口中打开报告进行预览
                            window.open(`/monitoring/reports/view?filename=${fileName}`, '_blank');
                            
                            this.$message.success('监控报告导出成功');
                        })
                        .catch(error => {
                            console.error('监控报告导出失败:', error);
                            this.$message.error('监控报告导出失败: ' + (error.response?.data || error.message || '未知错误'));
                            this.loading = false;
                        });
                },
                checkServiceDetailTarget() {
                    if (!this.currentServiceDetail) return;
                    
                    const index = this.targetServices.findIndex(s => s.name === this.currentServiceDetail.name);
                    if (index !== -1) {
                        this.checkTargetService(index);
                    } else {
                        this.$message.warning('无法找到该服务的索引，请返回列表重试');
                    }
                },
                getStatusType(status) {
                    switch (status) {
                        case 'NORMAL':
                            return 'success';
                        case 'WARNING':
                            return 'warning';
                        case 'ERROR':
                            return 'danger';
                        default:
                            return 'info';
                    }
                },
                formatTime(time) {
                    if (!time) return '未知';
                    if (typeof time === 'string') {
                        return time;
                    }
                    return new Date(time).toLocaleString();
                },
                formatMetrics(metrics) {
                    if (!metrics) return [];
                    return Object.keys(metrics).map(key => ({
                        key,
                        value: JSON.stringify(metrics[key])
                    }));
                },
                formatObjectToArray(obj) {
                    if (!obj) return [];
                    return Object.keys(obj).map(key => ({
                        key: this.translateKey(key),
                        value: obj[key]
                    }));
                },
                formatGCInfo(gcInfo) {
                    if (!gcInfo) return [];
                    
                    return Object.keys(gcInfo).map(name => {
                        const info = gcInfo[name];
                        
                        // 如果有错误信息
                        if (info.error) {
                            return {
                                name: name,
                                count: '获取失败',
                                time: '',
                                avgTimePerGC: '',
                                error: info.error
                            };
                        }
                        
                        const nameDisplay = this.translateGCName(name);
                        
                        return {
                            name: nameDisplay,
                            count: info.count,
                            time: info.time,
                            avgTimePerGC: info.avgTimePerGC,
                            memoryPools: info.memoryPools || '未知'
                        };
                    });
                },
                translateGCName(name) {
                    // GC收集器名称转换为更易懂的中文
                    const gcNameMap = {
                        'total': '总计',
                        'PS Scavenge': '年轻代并行收集器',
                        'PS MarkSweep': '老年代并行收集器',
                        'ParNew': '年轻代并行收集器',
                        'ConcurrentMarkSweep': '老年代并发收集器',
                        'G1 Young Generation': 'G1年轻代收集器',
                        'G1 Old Generation': 'G1老年代收集器',
                        'Copy': '串行年轻代收集器',
                        'MarkSweepCompact': '串行老年代收集器',
                        'ZGC': 'Z垃圾收集器'
                    };
                    
                    return gcNameMap[name] || name;
                },
                translateKey(key) {
                    const translations = {
                        // 堆内存相关
                        'init': '初始内存',
                        'used': '已使用内存',
                        'committed': '已提交内存',
                        'max': '最大内存',
                        'usagePercent': '内存使用率',
                        'note': '备注',
                        'error': '错误信息',
                        
                        // 线程相关
                        'current': '当前线程数',
                        'peak': '峰值线程数',
                        'daemon': '守护线程数',
                        'nonDaemon': '非守护线程数',
                        'totalStarted': '启动线程总数',
                        
                        // 类加载相关
                        'loaded': '当前已加载类数',
                        'totalLoaded': '总加载类数',
                        'unloaded': '已卸载类数',
                        
                        // GC相关
                        'count': '收集次数',
                        'time': '收集总时间',
                        'avgTimePerGC': '平均每次收集时间',
                        'memoryPools': '管理的内存区域',
                        
                        // 操作系统相关
                        'name': '操作系统名称',
                        'version': '操作系统版本',
                        'arch': '系统架构',
                        'availableProcessors': 'CPU核心数',
                        'systemLoadAverage': '系统负载平均值',
                        'processCpuTime': 'CPU使用时间',
                        'totalPhysicalMemory': '系统物理内存总量',
                        'freePhysicalMemory': '系统可用物理内存',
                        'physicalMemoryUsage': '系统内存使用率',
                        'jvmStartTime': 'JVM启动时间',
                        'jvmUptime': 'JVM运行时长'
                    };
                    
                    return translations[key] || key;
                },
                getMemoryColor(usagePercentStr) {
                    if (!usagePercentStr || usagePercentStr === 'N/A') return '#909399';
                    
                    const usagePercent = parseFloat(usagePercentStr);
                    if (isNaN(usagePercent)) return '#909399';
                    
                    if (usagePercent < 70) {
                        return '#67c23a'; // 绿色，健康
                    } else if (usagePercent < 85) {
                        return '#e6a23c'; // 黄色，警告
                    } else {
                        return '#f56c6c'; // 红色，危险
                    }
                },
                getMemoryPercentage(usagePercentStr) {
                    if (!usagePercentStr || usagePercentStr === 'N/A') return 0;
                    
                    // 移除百分号并解析为数值
                    const percentStr = usagePercentStr.toString().replace('%', '');
                    const percent = parseFloat(percentStr);
                    
                    return isNaN(percent) ? 0 : percent;
                },
                getElasticsearchStatusType(status) {
                    switch (status) {
                        case 'GREEN': return 'success';
                        case 'YELLOW': return 'warning';
                        case 'RED': return 'danger';
                        default: return 'info';
                    }
                },
                translateElasticsearchStatus(status) {
                    const statusMap = {
                        'GREEN': '健康',
                        'YELLOW': '警告',
                        'RED': '危险'
                    };
                    return statusMap[status] || status;
                },
                formatRedisKeyspace(keyspace) {
                    if (!keyspace) return {};
                    
                    // 将keyspace字符串解析为对象
                    let result = {};
                    
                    if (typeof keyspace === 'string') {
                        // 解析类似 "db0:keys=1,expires=0,avg_ttl=0"
                        const parts = keyspace.split(',');
                        const dbInfo = {};
                        
                        parts.forEach(part => {
                            const [key, value] = part.split('=');
                            if (key && value) {
                                dbInfo[key.trim()] = value.trim();
                            }
                        });
                        
                        result['数据库信息'] = dbInfo;
                    } else if (typeof keyspace === 'object') {
                        // 如果已经是对象，格式化显示
                        Object.keys(keyspace).forEach(db => {
                            result[`数据库${db.replace('db', '')}`] = 
                                `键值对数量: ${keyspace[db].keys || '0'}, ` +
                                `过期键: ${keyspace[db].expires || '0'}, ` +
                                `平均TTL: ${keyspace[db].avg_ttl || '0'}ms`;
                        });
                    }
                    
                    return result;
                },
                formatDbUrl(url) {
                    if (!url) return '';
                    
                    // 隐藏密码信息
                    return url.replace(/\/\/([^:]+):([^@]+)@/, '//******:******@');
                },
                formatMySQLVariables(variables) {
                    if (!variables) return [];
                    
                    // 选择一些重要的系统变量显示
                    const importantVars = [
                        'max_connections', 'connect_timeout', 'wait_timeout',
                        'max_allowed_packet', 'thread_cache_size', 'query_cache_size',
                        'innodb_buffer_pool_size', 'character_set_server', 'collation_server'
                    ];
                    
                    return Object.keys(variables)
                        .filter(key => importantVars.includes(key))
                        .map(key => ({
                            name: this.translateMySQLVariable(key),
                            value: variables[key]
                        }));
                },
                translateMySQLVariable(varName) {
                    const varMap = {
                        'max_connections': '最大连接数',
                        'connect_timeout': '连接超时(秒)',
                        'wait_timeout': '等待超时(秒)',
                        'max_allowed_packet': '最大允许数据包',
                        'thread_cache_size': '线程缓存大小',
                        'query_cache_size': '查询缓存大小',
                        'innodb_buffer_pool_size': 'InnoDB缓冲池大小',
                        'character_set_server': '服务器字符集',
                        'collation_server': '服务器排序规则'
                    };
                    
                    return varMap[varName] || varName;
                },
                formatMinioBuckets(buckets) {
                    if (!buckets || !Array.isArray(buckets)) return [];
                    
                    return buckets.map(bucket => ({
                        name: bucket.name,
                        creationDate: this.formatTime(bucket.creationDate),
                        size: bucket.size || '未知',
                        objectCount: bucket.objectCount || 0,
                        accessible: bucket.accessible !== undefined ? bucket.accessible : true,
                        policy: bucket.policy || 'private'
                    }));
                },
                showServiceDetails(service) {
                    this.currentServiceDetail = service;
                    this.serviceDetailVisible = true;
                },
                getStatusText(status) {
                    const statusMap = {
                        'NORMAL': '正常',
                        'WARNING': '警告',
                        'ERROR': '异常'
                    };
                    return statusMap[status] || status;
                },
                getBucketPolicyType(policy) {
                    const policyMap = {
                        'public': '公共',
                        'private': '私有'
                    };
                    return policyMap[policy] || policy;
                },
                getBucketPolicyText(policy) {
                    const policyMap = {
                        'public': '公共',
                        'private': '私有'
                    };
                    return policyMap[policy] || policy;
                },
                viewBucketDetails(bucket) {
                    // 实现查看存储桶详情的逻辑
                    console.log('查看存储桶详情:', bucket);
                },
                getNetworkStatusCount(status) {
                    return this.networkResults.filter(item => item.status === status).length;
                },
                getNetworkReachableCount() {
                    return this.networkResults.filter(item => item.metrics && item.metrics.isReachable).length;
                },
                getNetworkUnreachableCount() {
                    return this.networkResults.filter(item => !item.metrics || !item.metrics.isReachable).length;
                },
                getDirectConnectionCount() {
                    return this.networkResults.filter(item => item.metrics && item.metrics.connectionType === 'direct').length;
                },
                getResponseTimeClass(responseTime) {
                    if (responseTime < 100) return 'success';
                    if (responseTime < 200) return 'warning';
                    return 'danger';
                }
            }
        });
    </script>
    
    <style>
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .box-card {
            margin-bottom: 20px;
        }
        .jvm-card {
            margin-bottom: 30px;
        }
        .thread-stats {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
        }
        .stat-item {
            text-align: center;
            padding: 15px;
            border-radius: 4px;
            background-color: #f5f7fa;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            min-width: 100px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #409EFF;
        }
        .stat-value-sm {
            font-size: 16px;
            font-weight: bold;
            color: #409EFF;
            margin-top: 5px;
        }
        .stat-label {
            margin-top: 5px;
            font-size: 14px;
            color: #606266;
        }
        .stat-box {
            padding: 10px;
            border-radius: 4px;
            background-color: #f5f7fa;
            margin-bottom: 10px;
        }
        h4 {
            margin-top: 15px;
            margin-bottom: 10px;
            color: #303133;
        }
        .loading-container {
            text-align: center;
            padding: 40px 0;
        }
        .loading-container i {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 15px;
        }
        .loading-container p {
            color: #606266;
            font-size: 14px;
        }
        .memory-usage-card {
            margin-top: 20px;
            padding: 10px;
            background-color: #f5f7fa;
            border-radius: 4px;
        }
        .memory-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 14px;
            color: #606266;
        }
        .help-tip {
            margin-left: 5px;
            color: #909399;
            cursor: help;
        }
        .keyspace-item {
            padding: 8px 0;
            border-bottom: 1px solid #ebeef5;
        }
        .keyspace-item:last-child {
            border-bottom: none;
        }
        .bucket-info {
            margin: 15px 0;
        }
        .bucket-list {
            margin-top: 15px;
        }
        .db-info {
            margin: 15px 0;
            padding: 10px;
            background-color: #f5f7fa;
            border-radius: 4px;
        }
        .url-info {
            word-break: break-all;
            font-size: 12px;
            color: #909399;
        }
        .network-card {
            height: 100%;
        }
        .network-status {
            display: flex;
            justify-content: space-around;
            margin: 15px 0;
        }
        .network-status-item {
            text-align: center;
            padding: 10px;
            border-radius: 4px;
            background-color: #f5f7fa;
            width: 45%;
        }
        .network-status-label {
            font-size: 14px;
            color: #606266;
            margin-bottom: 5px;
        }
        .network-status-value {
            font-size: 20px;
        }
        .success-icon {
            color: #67c23a;
        }
        .error-icon {
            color: #f56c6c;
        }
        .network-details {
            margin-top: 15px;
            padding: 10px;
            background-color: #f5f7fa;
            border-radius: 4px;
            font-size: 14px;
        }
        .network-details div {
            margin-bottom: 5px;
        }
        .disabled-middleware {
            text-align: center;
            padding: 30px 0;
            color: #909399;
        }
        
        .disabled-middleware i {
            font-size: 40px;
            margin-bottom: 10px;
        }
        
        .hint-text {
            font-size: 12px;
            color: #C0C4CC;
        }
        
        .no-data {
            text-align: center;
            padding: 30px 0;
            color: #909399;
        }
        
        .no-data i {
            font-size: 40px;
            margin-bottom: 10px;
        }
        
        /* 服务详情弹窗样式 */
        .service-detail-dialog .el-dialog__body {
            padding: 20px !important;
        }
        
        .service-detail-dialog .el-descriptions {
            margin-bottom: 20px;
        }
        
        .service-detail-dialog .el-descriptions__label {
            width: 120px;
            color: #606266;
        }
        
        .service-detail-dialog .el-descriptions__content {
            color: #303133;
        }
        
        .dialog-loading {
            text-align: center;
            padding: 30px 0;
        }
        
        .dialog-loading i {
            font-size: 32px;
            color: #409EFF;
            margin-bottom: 15px;
        }
        
        .dialog-loading p {
            color: #606266;
            font-size: 14px;
        }
        
        /* MinIO 监控样式 */
        .bucket-overview {
            margin-bottom: 20px;
        }
        
        .no-buckets {
            text-align: center;
            padding: 40px 0;
            color: #909399;
        }
        
        .health-checks {
            padding: 20px 0;
        }
        
        .health-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #f5f7fa;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        
        .health-label {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #606266;
        }
        
        .health-label i {
            margin-right: 8px;
            font-size: 18px;
        }
        
        .health-value {
            font-weight: 600;
        }
        
        /* 网络监控新样式 */
        .network-overview-card {
            margin-bottom: 20px;
        }
        
        .network-overview-stats {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px 0;
        }
        
        .network-stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            min-width: 120px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .network-stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #409EFF;
            color: white;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .network-stat-icon.success {
            background-color: #67c23a;
        }
        
        .network-stat-icon.warning {
            background-color: #e6a23c;
        }
        
        .network-stat-icon.info {
            background-color: #909399;
        }
        
        .network-stat-content {
            text-align: center;
        }
        
        .network-stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 5px;
        }
        
        .network-stat-label {
            font-size: 14px;
            color: #606266;
        }
        
        .network-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 20px;
            margin-top: 15px;
        }
        
        .network-detail-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid #ebeef5;
        }
        
        .network-detail-card:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }
        
        .network-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-bottom: 1px solid #ebeef5;
        }
        
        .network-card-title {
            flex: 1;
        }
        
        .network-node-name {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            display: block;
            margin-bottom: 8px;
        }
        
        .network-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        
        .network-status-badge {
            margin-left: 15px;
        }
        
        .network-card-content {
            padding: 20px;
        }
        
        .network-info-section {
            margin-bottom: 20px;
        }
        
        .network-info-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .network-info-item:last-child {
            border-bottom: none;
        }
        
        .network-info-label {
            font-weight: 500;
            color: #606266;
            min-width: 80px;
        }
        
        .network-info-value {
            color: #303133;
            font-weight: 500;
            word-break: break-all;
        }
        
        .network-test-results {
            margin-bottom: 15px;
        }
        
        .network-test-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            margin-bottom: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #409EFF;
        }
        
        .network-test-label {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #606266;
        }
        
        .network-test-label i {
            margin-right: 8px;
            font-size: 16px;
        }
        
        .network-test-result {
            display: flex;
            align-items: center;
            font-weight: 600;
        }
        
        .network-test-result i {
            margin-right: 6px;
            font-size: 16px;
        }
        
        .network-success {
            color: #67c23a;
        }
        
        .network-error {
            color: #f56c6c;
        }
        
        .response-time.success {
            color: #67c23a;
        }
        
        .response-time.warning {
            color: #e6a23c;
        }
        
        .response-time.danger {
            color: #f56c6c;
        }
        
        .network-details-text {
            padding: 10px;
            background-color: #f0f2f5;
            border-radius: 4px;
            border-left: 3px solid #409EFF;
        }
        
        .network-details-text p {
            margin: 0;
            color: #606266;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            .network-cards-container {
                grid-template-columns: 1fr;
            }
            
            .network-overview-stats {
                flex-direction: column;
                gap: 15px;
            }
            
            .network-stat-item {
                flex-direction: row;
                justify-content: flex-start;
                width: 100%;
                max-width: 300px;
            }
            
            .network-stat-icon {
                margin-bottom: 0;
                margin-right: 15px;
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
            
            .network-stat-content {
                text-align: left;
            }
        }
        
        .dialog-loading i {
            font-size: 32px;
            color: #409EFF;
        }
        
        /* 错误卡片样式 */
        .error-card {
            border: 1px solid #f56c6c !important;
            background-color: #fef0f0;
        }
        
        .error-header {
            color: #f56c6c;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .error-header i {
            margin-right: 8px;
            font-size: 18px;
        }
        
        .error-content {
            padding: 0;
        }
        
        .error-info {
            margin: 15px 0;
            padding: 10px;
            background-color: #fdfcfc;
            border-radius: 4px;
            border: 1px solid #fde2e2;
        }
        
        .error-info p {
            margin: 8px 0;
            color: #606266;
        }
        
        .error-info strong {
            color: #303133;
        }
        
        .error-info ul {
            margin: 8px 0 0 0;
            padding-left: 20px;
        }
        
        .error-info li {
            margin: 3px 0;
            color: #606266;
            font-size: 14px;
        }
        
        .error-actions {
            margin-top: 15px;
            text-align: center;
        }
    </style>
</body>
</html> 